import 'package:flutter/material.dart';
import 'package:flutter_tech_shop/widgets/app_button.dart';
import '../shared/Product.dart';
import '../shared/colors.dart';
import '../shared/styles.dart';

Widget productItem(Product product,
    {double? imgWidth, onLike, onTapped, bool isProductPage = false}) {
  return GestureDetector(
    onTap: () {
      onTapped();
    },
    child: Container(
      width: 180,
      height: 180,
      // color: Colors.red,
      margin: EdgeInsets.only(left: 20),
      child: Stack(
        children: <Widget>[
          Container(
              width: 180,
              height: 180,
              child: Hero(
                  transitionOnUserGestures: true,
                  tag: product.name,
                  child: Image.asset(product.image,
                      width: (imgWidth != null) ? imgWidth : 100))),
          Positioned(
            bottom: (isProductPage) ? 10 : 70,
            right: 0,
            child: IconButton(
                onPressed: onLike, icon: Icon(
              (product.userLiked) ? Icons.favorite : Icons.favorite_border,
              color: (product.userLiked) ? primaryColor : darkText,
              size: 30,
            )),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            child: (!isProductPage)
                ? Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(product.name, style: foodNameText),
                Text(product.price, style: priceText),
              ],
            )
                : Text(' '),
          ),
          Positioned(
              top: 10,
              left: 10,
              child: (product.discount != null && product.discount > 0)
                  ? Container(
                padding:
                EdgeInsets.only(top: 5, left: 10, right: 10, bottom: 5),
                decoration: BoxDecoration(
                    color: Colors.grey[600],
                    borderRadius: BorderRadius.circular(50)),
                child: Text('-' + product.discount.toString() + '%',
                    style: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.w700)),
              )
                  : SizedBox(width: 0))
        ],
      ),
    ),
  );
}
